<template>
  <!-- 添加菜单 -->
  <div class="dialog-container">
    <el-dialog
      :title="dialogType=='add'?'添加菜单':dialogType == 'detail'?'菜单信息':'修改菜单'"
      :visible="dialogVisible"
      @opened="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
        :disabled="dialogType == 'detail'"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="菜单类型" prop="type">
              <el-radio-group v-model="dataForm.type" size="mini" style="width: 178px" @change="setRules">
                <el-radio-button :label="0">目录</el-radio-button>
                <el-radio-button :label="1">菜单</el-radio-button>
                <el-radio-button :label="2">按钮</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="dataForm.type !==0" label="上级菜单" prop="pid">
              <Treeselect
                v-model="dataForm.pid"
                class="w-100 form-treeselect"
                placeholder="请选择上级菜单"
                :multiple="false"
                :options="menuTree"
                :load-options="loadMenuTree"
                :normalizer="normalizer"
                :disabled="dialogType == 'detail'"
                no-children-text="没有更多了"
              />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type !== 2" :span="12">
            <el-form-item label="菜单标题" prop="title">
              <el-input v-model="dataForm.title" maxlength="255" placeholder="请输入菜单标题" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type === 2" :span="12">
            <el-form-item label="按钮名称" prop="title">
              <el-input v-model="dataForm.title" maxlength="255" placeholder="请输入按钮名称" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type !== 0" :span="12">
            <el-form-item label="权限标识" prop="permission">
              <el-input v-model="dataForm.permission" maxlength="255" placeholder="请输入权限标识" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type !== 2" :span="12">
            <el-form-item label="菜单图标" prop="icon">
              <el-input v-model="dataForm.icon" maxlength="50" placeholder="请输入菜单图标" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type !== 2" :span="12">
            <el-form-item label="路由地址" prop="path">
              <el-input v-model="dataForm.path" maxlength="50" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type === 1" :span="12">
            <el-form-item label="组件名称" prop="name">
              <el-input v-model="dataForm.name" maxlength="50" placeholder="请输入组件名称" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type === 1" :span="12">
            <el-form-item label="组件路径" prop="component">
              <el-input v-model="dataForm.component" maxlength="50" placeholder="请输入组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="menuSort">
              <el-input-number v-model="dataForm.menuSort" class="w-100" :controls="false" :precision="0" :max="999" />
            </el-form-item>
          </el-col>
          <el-col v-show="dataForm.type !== 2" :span="12">
            <el-form-item label="可见" prop="hidden">
              <el-switch v-model="dataForm.hidden" :inactive-value="true" :active-value="false" active-color="#13ce66" inactive-color="#ff4949" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <span v-if="dialogType !== 'detail'" slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
import { add, edit, getTree } from '@/api/system/menu'

export default {
  name: 'AddMenuFormDialog',
  components: {
    Treeselect
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogType: {
      type: String,
      default: 'add'
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      saveLoading: false,
      dataForm: {
        id: '', pid: null, title: '', type: 1,
        permission: '', path: '', menuSort: null,
        icon: '', hidden: false, name: '',
        component: '', cache: false, iframe: false
      },
      rules: {
        type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        component: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
        path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
        pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }]
      },
      normalizer(node) {
        let result = {
          id: node.id, label: node.meta.title, children: node.children || null
        }
        if (!node.children) {
          result = { id: node.id, label: node.meta.title }
        }
        return result
      },
      menuTree: null
    }
  },
  watch: {

  },
  created() {
  },
  methods: {
    initData() {
      this.saveLoading = false
      if (this.obj) {
        this.dataForm = JSON.parse(JSON.stringify(this.obj))
        if (this.dataForm.pid === null) {
          this.dataForm.pid = 0
        }
      }
      this.setRules(this.dataForm.type)
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    async loadMenuTree({ action }) {
      if (action === LOAD_ROOT_OPTIONS) {
        getTree().then(result => {
          var res = JSON.parse(JSON.stringify(result.data.list))
          var data = res
          function exec(array) {
            array.forEach(item => {
              if (!item.children || item.children.length === 0) {
                delete item.children
              } else {
                exec(item.children)
              }
            })
          }
          exec(data)
          this.menuTree = [{
            id: 0,
            meta: { title: '无上级菜单' },
            children: data
          }]
        })
      }
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          if (this.dataForm.id) {
            edit(this.dataForm).then(() => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
            }).catch(() => {
              this.saveLoading = false
            })
          } else {
            add(this.dataForm).then(() => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$emit('flushPage')
              this.$emit('closeDialog')
              this.clearData()
            }).catch(() => {
              this.saveLoading = false
            })
          }
        }
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.clearData()
      this.$refs['form'].clearValidate()
    },
    clearData() {
      this.dataForm = {
        id: '', pid: null, title: '', type: 1,
        permission: '', path: '', menuSort: null,
        icon: '', hidden: false, name: '',
        component: '', cache: false, iframe: false
      }
    },
    setRules(val) {
      if (val === 0) {
        this.rules = {
          type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }]
          // pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }]
        }
      } else if (val === 1) {
        this.rules = {
          type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
          title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
          component: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
          path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
          pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }]
        }
      } else if (val === 2) {
        this.rules = {
          type: [{ required: true, message: '请选择菜单类型', trigger: 'change' }],
          title: [{ required: true, message: '请输入按钮名称', trigger: 'blur' }],
          pid: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
          permission: [{ required: true, message: '请输入权限标识', trigger: 'blur' }]
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
